<template>
  <a-modal
    :title="`角色权限配置`"
    :width="840"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok')}"
    @cancel="() => {$emit('cancel')}"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 20 } }">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="model && model.id > 0" label="ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="权限">
          <div class="awm-role-wrap">
            <a-tree
              v-model="checkedTree"
              default-expand-all
              checkable
              :height="233"
              :tree-data="c_allRole"
              @check="onCheck"
            >
            </a-tree>
          </div>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = ['id']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    levelList: {
      type: Array,
      default: () => [],
    },
    allRole: {
      type: Array,
      default: () => [],
    },
    model: {
      type: Object,
      default: () => null,
    },
    role: {
      type: Array,
      default: () => [],
    },
    
  },
  data() {
    return {
      form: this.$form.createForm(this),
      checkedTree: null,
      parentIdList: [],
      parentArr: [],
      // 复选款标识
      flag: false,
    }
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    clearData(){
      this.checkedTree = [];
      this.parentIdList = [];
      this.flag = false;
    },
    getid(){
      return this.model.id
    },
    onCheck(checkedkeys, e) {
      this.parentArr = []
      this.flag = true
      console.log(e)
      this.parentIdList = e.halfCheckedKeys
    },
    getRolePermissionList(){
      console.log(this.checkedTree)
      console.log(this.parentIdList)
      let tree = this.checkedTree.concat(this.parentArr).concat(this.parentIdList) 
      console.log(tree);
      let arr = [];
      arr = tree.map(v=>{
        return {
          permissionId: v
        }
      })
      return arr
    },
    onCheckAllChange(){

    },
    onChange(){

    },
  },
  computed: {
    c_allRole: function () {
      let allRole = this.allRole
      let c_allRole = allRole.map((v) => {
        let roleJson = {
          title: v.name,
          key: v.id,
        }
        if (v.permissions != 0) {
          roleJson.children = []
          v.permissions.forEach((it) => {
            let itJson = {
              title: it.name,
              key: it.id,
            }
            if (it.permissions.length != 0) {
              itJson.children = []
              it.permissions.forEach((its) => {
                let itsJson = {
                  title: its.name,
                  key: its.id,
                }
                itJson.children.push(itsJson)
              })
            }
            roleJson.children.push(itJson)
          })
        }
        return roleJson
      })
      return c_allRole
    },
    c_allRoleJSON: function () {
      let allRole = this.allRole
      let c_allRoleJSON = {}
      allRole.forEach((v) => {
        c_allRoleJSON[v.url] = v.id
        if (v.permissions != 0) {
          v.permissions.forEach((it) => {
            c_allRoleJSON[it.url] = it.id
            if (it.permissions.length != 0) {
              it.permissions.forEach((its) => {
                c_allRoleJSON[its.url] = its.id
              })
            }
          })
        }
      })
      return c_allRoleJSON
    },
    
  },
  watch:{
    visible(n){
      if(!n) {
        this.clearData()
        return false
      }
    },
    'role':function(n){
      if(!n){
        return false
      }
      let arr = [], pArr = []
      let role = this.role;
      console.log(role)
      role.forEach(v=>{
        
        if( v.permissions.length != 0 ){
          
          v.permissions.forEach(it=>{
            if( it.permissions.length != 0 ){
              it.permissions.forEach(its=>{
                if( its.permissions.length != 0 ){
                  pArr.push(its.id)
                }else{
                  arr.push(its.id)
                }
              })
              pArr.push(it.id)
            }else{
              arr.push(it.id)
            }
          })
          pArr.push(v.id)
        }else{
          arr.push(v.id)
        }
      })
      console.log(arr, pArr)
      this.checkedTree = arr
      this.parentArr = pArr
    }
  }
}
</script>

<style lang="less" scoped>
  .awm-role-wrap{
     &> ul>li{
       
       /deep/ &.ant-tree-treenode-switcher-open,
       /deep/ &.ant-tree-treenode-switcher-close{
         padding-top: 4px;
        border: 1px solid #EEEFF2;
        margin-bottom: 10px !important;
        position: relative;
        padding-left: 15px;
        background-image: linear-gradient(#F2F3F5 0%, #F2F3F5 35px, #fff 35px, #fff 0% ); 
        // &::before{
        //   content: '';
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   right: 0;
        //   height: 35px;
        //   background-color: #ccc;
        // }
        // .ant-tree-switcher{
        //   display: none;
        // }
        &>ul>li>ul{
          display: flex;
          flex-wrap: wrap;
          li{
            margin-right: 10px;
            &:first-child{
              padding-top: 4px;
            }
          }
        }
      }
     }
    
  }
</style>
